<template>
	<view>
		<view class="card" :style="{ backgroundColor: this.color }">
			<view class="task_container">
				<button class="finish_button" 
					@click="handleClick(this.task.taskId, this.task.status)" 
					type="default"
					v-if="this.task.status !== '已取消'">
					<image 
						src="../assets/icons/unhandled.png" 
						class="icon_image_unhandled"
						v-if="this.task.status !== '已完成'"></image>
					<image 
						src="../assets/icons/complete.png" 
						class="icon_image_complete"
						v-else></image>
				</button>

				<view>{{ this.task.taskName }}</view>

				<image v-for="(user, index) in this.task.users" :key="index" :src="outputBase64(user)"
					class="user_profiles"></image>

				<view class="task_status">{{ this.task.status }}</view>

				<button class="expand_button" @click="showActionSheet(this.task)">
					<image src="../assets/icons/expand.png" class="icon_image_unhandled"></image>
				</button>
			</view>
			<view v-for="(sonTask, index) in this.task.sons" :key="sonTask.taskId" class="son_task_container">
				<button class="finish_button"
					@click="handleClick(sonTask.taskId, sonTask.status)" 
					type="default"
					v-if="sonTask.status !== '已取消'">
					<image 
						src="../assets/icons/unhandled.png" 
						class="icon_image_unhandled"
						v-if="sonTask.status !== '已完成'"></image>
					<image 
						src="../assets/icons/complete.png" 
						class="icon_image_complete"
						v-else></image>
				</button>

				<view>{{ sonTask.taskName }}</view>

				<image v-for="(user, index) in sonTask.users" :key="index" :src="outputBase64(user)"
					class="user_profiles"></image>

				<view class="task_status">{{ sonTask.status }}</view>

				<button class="expand_button" @click="showActionSheet(sonTask)">
					<image src="../assets/icons/expand.png" class="icon_image_unhandled"></image>
				</button>
			</view>
		</view>
		<ConfirmDialog :visible="confirmVisible" @confirm="confirmAction" @cancel="confirmVisible = false"
			:message="dialogMessage" />
	</view>
</template>

<script>
	import api from '../api/api'
	import ConfirmDialog from "./ConfirmDialog.vue"
	export default {
		props: {
			projectId: {
				type: Number,
				required: true
			},
			endDate: {
				type: String,
				required: true
			},
			task: {
				type: Object,
				required: true
			},
			color: {
				type: String
			}
		},
		components: {
			ConfirmDialog // 注册确认组件
		},
		data() {
			return {
				confirmVisible: false, // 控制确认窗口的显示状态
				currentTaskId: null, // 对话框对应哪个task
				dialogMessage: "", // 确认对话框显示的提示信息
				newStatus: "" // 对话框点击确认后需要修改的任务状态
			}
		},
		methods: {
			outputBase64(base64Url) {
				/// 获取到base64Data
				var base64Data = base64Url;
				/// 通过微信小程序自带方法将base64转为二进制去除特殊符号，再转回base64
				base64Data = wx.arrayBufferToBase64(wx.base64ToArrayBuffer(base64Data));
				/// 拼接请求头，data格式可以为image/png或者image/jpeg等，看需求
				const base64ImgUrl = "data:image/png;base64," + base64Data;
				/// 得到的base64ImgUrl直接给图片:src使用即可
				return base64ImgUrl;
			},
			handleClick(taskId, status) {
				this.currentTaskId = taskId; // 保存当前点击的任务ID
				console.info(status);
				if(status === "已完成"){
					this.dialogMessage = "确认取消完成状态吗？"; 
					this.newStatus = "110";
				}
				else {
					this.dialogMessage = "确认当前任务已经完成吗？"; 
					this.newStatus = "111";
				}
				this.confirmVisible = true; // 显示确认窗口
			},
			showActionSheet(task) {
				const itemList = task.status === "已取消" ?
					["编辑任务", "撤销取消"] :
					["编辑任务", "取消任务"];
				uni.showActionSheet({
					itemList: itemList,
					success: (res) => {
						res.tapIndex ? this.cancelTask(task) : this.editTask(task)
					}
				});
			},
			// ActionSheet里面的方法
			editTask(task) {
				uni.navigateTo({
					url: `/pages/task_create/task_create` +
						`?taskId=${task.taskId}` +
						`&taskName=${task.taskName}` +
						`&description=${task.description}` +
						`&dueDate=${task.dueDate}` +
						`&pid=${task.pid}` +
						`&editOrCreate=edit` +
						`&projectId=${this.projectId}` +
						`&endDate=${this.endDate}`
				})
			},
			cancelTask(task) {
				this.currentTaskId = task.taskId; // 保存当前点击的任务ID
				if(task.status === "已取消"){
					this.dialogMessage = "确认恢复当前任务吗？";
					this.newStatus = "110";
				}
				else{
					this.dialogMessage = "确认取消当前任务吗？";
					this.newStatus = "113";
				}
				this.confirmVisible = true; // 显示确认窗口
			},
			// ConfirmDialog里面的方法
			confirmAction() {
				this.confirmVisible = false; // 关闭确认窗口
				// 先改变自己的状态
				api.changeTaskStatus({
					taskId: this.currentTaskId,
					newStatus: this.newStatus
				}).then(async (res) => {
				    // 然后改变和自己相互关联的任务的状态
				    if (this.currentTaskId === this.task.taskId) { // 如果变化的是父任务，则所有子任务同步变化
						const promises = this.task.sons.map((sonTask) => {
							return api.changeTaskStatus({
								taskId: sonTask.taskId,
								newStatus: this.newStatus
							});
						});
						await Promise.all(promises); // 等待所有子任务更新完成
				    } else { // 如果变化的是子任务，则检查父任务的所有下辖子任务状态
						let newParentStatus = "111";
						// 当前更改的任务需要特别判断，因为它的status还没有更新
						if (this.newStatus !== "111" && this.newStatus !== "113")
							newParentStatus = "110";
						for (const sonTask of this.task.sons) { // 改用 for...of 来支持 break
							if (sonTask.taskId !== this.currentTaskId && (sonTask.status === "进行中" || sonTask.status === "已超期")) {
								newParentStatus = "110";
								break; // 直接退出循环
							}
						}
						await api.changeTaskStatus({
							taskId: this.task.taskId,
							newStatus: newParentStatus
						});
				    }
				
				    // 最后刷新页面
				    let currentPage = getCurrentPages().pop();
				    const route = '/' + currentPage.route;
				
				    // 将参数对象转换为查询字符串
				    const query = Object.keys(currentPage.options)
				      .map(key => `${key}=${encodeURIComponent(currentPage.options[key])}`)
				      .join('&');
				
				    const fullUrl = query ? `${route}?${query}` : route;
				
				    // 重新加载页面并包含参数
				    uni.reLaunch({
				      url: fullUrl
				    });
				});
			}
		}
	}
</script>

<style>
	.card {
		display: flex;
		padding: 15px;
		border-radius: 10px;
		margin: 20px;
		position: relative;
		flex-direction: column;
	}

	.task_container {
		display: flex;
		/* 使按钮和文本在同一行 */
		align-items: center;
		/* 垂直居中对齐 */
		justify-content: flex-start;
		/* 水平靠左对齐 */
		width: 100%;
		/* 使子任务占满整行 */
	}

	.finish_button {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		margin-right: 10px;
		margin-left: 0;
		margin-top: 2px;
		background: rgba(0, 0, 0, 0) !important;
	}

	.finish_button::after {
		border: none;
	}

	.icon_image_unhandled {
		width: 20px;
		height: 20px;
	}

	.icon_image_complete {
		/*在同样是256像素的情况下，complete图标比unhandled图标要稍微大一点，所以需要微调*/
		width: 17px;
		height: 17px;
		margin-left: 1px;
	}

	.user_profiles {
		width: 25px;
		height: 25px;
		border-radius: 50%;
		margin-left: 5px;
	}

	.task_status {
		color: #666;
		position: absolute;
		right: 50px;
	}

	.expand_button {
		position: absolute;
		right: 10px;

		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		background: rgba(0, 0, 0, 0) !important;

		width: 30px;
		height: 30px;
	}

	.expand_button::after {
		border: none;
	}

	.son_task_container {
		display: flex;
		/* 使按钮和文本在同一行 */
		align-items: center;
		/* 垂直居中对齐 */
		justify-content: flex-start;
		/* 水平靠左对齐 */
		margin-left: 20px;
		margin-top: 10px;
		width: 100%;
	}
</style>